//Typography
.font-size-rems(@px-size){
	@rem-size: @px-size / @base-font-size;
	font-size: ~"@{px-size}px"; 
	font-size: ~"@{rem-size}rem";
}

.font-size-ems(@target-px-size, @context-px-size:@base-font-size) {
	font-size: (@target-px-size / @context-px-size) * 1em;
}

.font-face( @family-name, @font-path, @font-weight:normal, @font-style:normal, @include-svg:false ) when not (@include-svg) {
	@font-face {
	    font-family: @family-name;
	    src: url('@{font-path}.eot');
	    src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
	         url('@{font-path}.woff') format('woff'),
	         url('@{font-path}.ttf') format('truetype');
	    font-weight: @font-weight;
	    font-style: @font-style;
	}
}

.font-face( @family-name, @font-path, @font-weight:normal, @font-style:normal, @include-svg:true ) when (@include-svg) {
	@font-face {
	    font-family: @family-name;
	    src: url('@{font-path}.eot');
	    src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
	         url('@{font-path}.woff') format('woff'),
	         url('@{font-path}.ttf') format('truetype'),
			 url('@{font-path}.svg#@{family-name}') format('svg');
	    font-weight: @font-weight;
	    font-style: @font-style;
	}
}
//文字换行
// .wrap-words() {
// 	-ms-word-break: break-all;
// 	word-break: break-all;
// 	word-break: break-word;
// 	-webkit-hyphens: auto;
// 	-moz-hyphens: auto;
// 	hyphens: auto;
// }

// Webkit-style focus
// .tab-focus() {
//   // Default
//   outline: thin dotted #333;
//   // Webkit
//   outline: 5px auto -webkit-focus-ring-color;
//   outline-offset: -2px;
// }



//Shortcuts

.border-radius(@radius:5px) {
    -webkit-border-radius: @arguments;
	-moz-border-radius: @arguments;
	border-radius: @arguments;
	// 背景不超出圆角
	-moz-background-clip: padding; 
	-webkit-background-clip: padding-box; 
	background-clip: padding-box;
}

// .box-sizing(@type: border-box) {
// 	-moz-box-sizing: @type;
// 	-webkit-box-sizing: @type;
// 	-ms-box-sizing: @type;
// 	box-sizing: @type;
// }

.box-shadow(@shadow: 1px 1px 2px rgba(0,0,0,0.25)) {
	-webkit-box-shadow: @shadow;
	-moz-box-shadow: @shadow;
	box-shadow: @shadow;
}
.box-shadow(@shadow_inset,@shadow_outset) {
	-webkit-box-shadow: @shadow_inset,@shadow_outset;
	-moz-box-shadow: @shadow_inset,@shadow_outset;
	box-shadow: @shadow_inset,@shadow_outset;
}
.box-shadow(@shadow_one,@shadow_two,@shadow_three) {
	-webkit-box-shadow: @shadow_one,@shadow_two,@shadow_three;
	-moz-box-shadow: @shadow_one,@shadow_two,@shadow_three;
	box-shadow: @shadow_one,@shadow_two,@shadow_three;
}
.filter(@filter: grayscale(100%)) {
	-webkit-filter: @filter;
	-moz-filter: @filter;
	-ms-filter: @filter;
	-o-filter: @filter;
	filter: @filter;
}

.transition(@transition1,@transition2) {
  -webkit-transition: @transition1,@transition2;
  	 -moz-transition: @transition1,@transition2;
       -o-transition: @transition1,@transition2;
          transition: @transition1,@transition2;
}
.transition(@transition1,@transition2,@transition3) {
  -webkit-transition: @transition1,@transition2,@transition3;
  	 -moz-transition: @transition1,@transition2,@transition3;
       -o-transition: @transition1,@transition2,@transition3;
          transition: @transition1,@transition2,@transition3;
}
// Transitions
// .transition(@transition) {
//   -webkit-transition: @transition;
//           transition: @transition;
// }
// .transition-delay(@transition-delay) {
//   -webkit-transition-delay: @transition-delay;
//           transition-delay: @transition-delay;
// }
// .transition-duration(@transition-duration) {
//   -webkit-transition-duration: @transition-duration;
//           transition-duration: @transition-duration;
// }
// .transition-transform(@transition) {
//   -webkit-transition: -webkit-transform @transition;
//      -moz-transition: -moz-transform @transition;
//        -o-transition: -o-transform @transition;
//           transition: transform @transition;
// }
//旋转
// .rotate(@rotation) {
// 	-webkit-transform: rotate(@rotation);
// 	-moz-transform: rotate(@rotation);
// 	-o-transform: rotate(@rotation);
// 	transform: rotate(@rotation);
// }
//输入框占位符
// .placeholder(@color: #DDD) {
// 	:-moz-placeholder {
// 		color: @color;
// 	}
// 	::-webkit-input-placeholder {
// 		color: @color;
// 	}
// }
//透明度
// .opacity(@transparency:50) when not (@disable-filters){
// 	opacity:@transparency/100;
// 	-moz-opacity:@transparency/100;
// 	-khtml-opacity: @transparency/100;
// 	filter:alpha(opacity=@transparency);
// }

// .opacity(@transparency:50) when (@disable-filters){
// 	opacity:@transparency/100;
// 	-moz-opacity:@transparency/100;
// 	-khtml-opacity: @transparency/100;
// }

//
.scale3d(@x,@y,@z){
	-webkit-transform: scale3d(@x,@y,@z);
	transform: scale3d(@x,@y,@z);
}


//渐变
#box-gradient {
	.horizontal (@start-color, @end-color) when not (@disable-filters) {
		//background-color: @end-color;
		background-repeat: repeat-x;
		background-image: -khtml-gradient(linear, left top, right top, from(@start-color), to(@end-color)); /* Konqueror */
		background-image: -moz-linear-gradient(left, @start-color, @end-color); /* FF 3.6+ */
		background-image: -ms-linear-gradient(left, @start-color, @end-color); /* IE10 */
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @start-color), color-stop(100%, @end-color)); /* Safari 4+, Chrome 2+ */
		background-image: -webkit-linear-gradient(left, @start-color, @end-color); /* Safari 5.1+, Chrome 10+ */
		background-image: -o-linear-gradient(left, @start-color, @end-color); /* Opera 11.10 */
		background-image: -ms-linear-gradient(left, @start-color 0%, @end-color 100%);  /* IE10+ */
		background-image: linear-gradient(left, @start-color, @end-color); /* the standard */
		//filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start-color,@end-color)); /* IE6 & IE7 */
		//-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start-color,@end-color); /* IE8+ */
	}
	.horizontal (@start-color, @end-color) when (@disable-filters) {
		//background-color: @end-color;
		background-repeat: repeat-x;
		background-image: -khtml-gradient(linear, left top, right top, from(@start-color), to(@end-color)); /* Konqueror */
		background-image: -moz-linear-gradient(left, @start-color, @end-color); /* FF 3.6+ */
		background-image: -ms-linear-gradient(left, @start-color, @end-color); /* IE10 */
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @start-color), color-stop(100%, @end-color)); /* Safari 4+, Chrome 2+ */
		background-image: -webkit-linear-gradient(left, @start-color, @end-color); /* Safari 5.1+, Chrome 10+ */
		background-image: -o-linear-gradient(left, @start-color, @end-color); /* Opera 11.10 */
		background-image: -ms-linear-gradient(left, @start-color 0%, @end-color 100%);  /* IE10+ */
		background-image: linear-gradient(left, @start-color, @end-color); /* the standard */
	}
	.vertical (@start-color, @end-color) when (@disable-filters)  {
		//background-color: @end-color;
		background-repeat: repeat-x;
		background-image: -khtml-gradient(linear, left top, left bottom, from(@start-color), to(@end-color)); /* Konqueror */
		background-image: -moz-linear-gradient(@start-color, @end-color); /* FF 3.6+ */
		background-image: -ms-linear-gradient(@start-color, @end-color); /* IE10 */
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start-color), color-stop(100%, @end-color)); /* Safari 4+, Chrome 2+ */
		background-image: -webkit-linear-gradient(@start-color, @end-color); /* Safari 5.1+, Chrome 10+ */
		background-image: -o-linear-gradient(@start-color, @end-color); /* Opera 11.10 */
		background-image: -ms-linear-gradient(top, @start-color 0%, @end-color 100%);  /* IE10+ */
		background-image: linear-gradient(@start-color, @end-color); /* the standard */
	}
	.vertical (@start-color, @end-color) when not (@disable-filters)  {
		//background-color: @end-color;
		background-repeat: repeat-x;
		background-image: -khtml-gradient(linear, left top, left bottom, from(@start-color), to(@end-color)); /* Konqueror */
		background-image: -moz-linear-gradient(@start-color, @end-color); /* FF 3.6+ */
		background-image: -ms-linear-gradient(@start-color, @end-color); /* IE10 */
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start-color), color-stop(100%, @end-color)); /* Safari 4+, Chrome 2+ */
		background-image: -webkit-linear-gradient(@start-color, @end-color); /* Safari 5.1+, Chrome 10+ */
		background-image: -o-linear-gradient(@start-color, @end-color); /* Opera 11.10 */
		background-image: -ms-linear-gradient(top, @start-color 0%, @end-color 100%);  /* IE10+ */
		background-image: linear-gradient(@start-color, @end-color); /* the standard */
		//filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color)); /* IE6 & IE7 */
		//-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color); /* IE8+ */
	}
}

// Helpers --------------------------------
//清除浮动
.clearfix() when not (@using-ieclasses) {
	&:before,
	&:after {
	    content: "";
	    display: table;
	}
	&:after {
	    clear: both;
	}
	*zoom: 1;
}

.clearfix() when (@using-ieclasses) {
	&:before,
	&:after {
	    content: "";
	    display: table;
	}
	&:after {
	    clear: both;
	}
	#ie6 &, #ie7 & {
		zoom: 1;
	}
}
//内敛
.inline-block() when (@using-ieclasses) {
	display: inline-block;
	#ie7 & {
		display: inline;
		zoom: 1;
	}
}

.inline-block() when not (@using-ieclasses) {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
//无文字内容显示
.ir() {
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	background-color: transparent;
}
//隐藏
.hidden() {
	display: none !important;
	visibility: hidden;
}

.visually-hidden() {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	&.focusable:active,
	&.focusable:focus {
	    clip: auto;
	    height: auto;
	    margin: 0;
	    overflow: visible;
	    position: static;
	    width: auto;
	}
}
//尺寸
.size(@thesize) {
	width: @thesize;
	height: @thesize;
}

.size(@width, @height) {
	width: @width;
	height: @height;
}

//百分比列
.col(@column){
	display: inline;
	float: left;
	width:100/@column *1%;
}


.transform-style(@p:preserve-3d){
	 -webkit-transform-style: @p;
    -moz-transform-style: @p;
    -ms-transform-style: @p;
    -o-transform-style: @p;
    transform-style: @p;
}

.backface-visibility(@see:hidden){
	-webkit-backface-visibility: @see;
	-moz-backface-visibility: @see;
	-ms-backface-visibility: @see;
	backface-visibility: @see;
}




// =============================================
// @des:      veryless util retina image
// @author:   feichang <veryued@gmail.com>
// @url:      http://veryless.org
// @time:     2013-02-28
// 
// Usage from preboot
// .jumbotron {
//   .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
// }
// =============================================


.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}


//png24透明
//.c-png24(#ccc, "http://taobao.com/logo.jpg");

.c-png24(@color, @url){
	background: @color url("@{url}") no-repeat 0 0;
    _background: @color none;
    filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale')";
}

//**
// * background-clip 背景覆盖的位置
// * @params  [ border-box || padding-box || content-box]
// * @author 飞长 <veryued@gmail.com>
// */

.background-clip(@background-clip: border-box){
	-moz-background-clip: @background-clip;
	  -webkit-background-clip: @background-clip;
		background-clip: @background-clip;
}
//**
// * background-origin 背景开始的位置
// * @params	[padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
// * @author	飞长 <veryued@gmail.com>
// */

.background-origin(@background-origin: padding-box){
	-moz-background-origin: @background-origin;
	  -webkit-background-origin: @background-origin;
	    background-origin: @background-origin;
}

//背景色透明 rgba

.background-rgba(@red, @green, @blue, @alpha:1){

		@filtercolor:`(_f = function(d){ var v = (parseInt(d)|0).toString(16);return v.length<2 ? "0"+v : v;},
						'#'+_f(@{alpha}*255) + _f(@{red}) + _f(@{green})+ _f(@{blue}))`;
		
		background-color: ~'rgba(@{red},@{green},@{blue},@{alpha})';
    -ms-filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{filtercolor}',endColorstr='@{filtercolor}')";
    filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{filtercolor}',endColorstr='@{filtercolor}')";	
}

//**
// * background-size 背景尺寸
// * @params	[ [ <length> | <percentage> | auto ]{1,2} | cover | contain ]#
// * @author	飞长 <veryued@gmail.com>
// */

.background-size(@background-size: auto){
	-moz-background-size: @background-size;
	  -webkit-background-size: @background-size;
	    -o-background-size: @background-size;
	      background-size: @background-size;
}

//**
// * resize
// * @params	horizontal, vertical, both
// * @author	飞长 <veryued@gmail.com>
// */

.resizable(@direction: both) {
  resize: @direction;
  overflow: auto; // Safari fix
}

// display flexbox
.flexbox() {
  // 2009 spec
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;

  // tweener
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -o-flexbox;

  // new spec
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.flex(@flex) {
  -webkit-box-flex: @flex;
  -moz-box-flex: @flex;
  -o-box-flex: @flex;
  box-flex: @flex;
  -webkit-flex: @flex;
  -moz-flex: @flex;
  -ms-flex: @flex;
  -o-flex: @flex;
  flex: @flex;
}

// flex-derection = box-orient + box-direction
.flex-direction(@direction) when (@direction = row) {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-direction(@direction) when (@direction = row-reverse) {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex-direction(@direction) when (@direction = column) {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-direction(@direction) when (@direction = column-reverse) {

//http://www.w3school.com.cn/cssref/pr_box-orient.asp
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.flex-direction(@direction) {
  -webkit-flex-direction: @direction;
  -moz-flex-direction: @direction;
  -ms-flex-direction: @direction;
  -o-flex-direction: @direction;
  flex-direction: @direction;
}

.order(@order) {
  -webkit-box-ordinal-group: @order + 1;
  -moz-box-ordinal-group: @order + 1;
  -o-box-ordinal-group: @order + 1;
  -webkit-order: @order;
  -moz-order: @order;
  -ms-order: @order;
  -o-order: @order;
  order: @order;
}


//justify content//

//2009 property is box-pack
//2009 property does not support a method for space-around

//start
//end
//center
//justify

.justify-content(@justify-method) when (@justify-method = flex-start) {
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-flex-pack: start;
-o-box-pack: start;
box-pack: start;
justify-content: flex-start;
}

.justify-content(@justify-method) when (@justify-method = flex-end) {
-webkit-box-pack: end;
-moz-box-pack: end;
-ms-flex-pack: end;
-o-box-pack: end;
box-pack: end;
justify-content: flex-end;
}

.justify-content(@justify-method) when (@justify-method = center) {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center; 
    -o-box-pack: center;
    box-pack: center;
    justify-content: center;
}



.justify-content(@justify-method) when (@justify-method = space-between) {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -o-box-pack: justify;
    box-pack: justify;
    justify-content: space-between;
}
// note there is no fallback 2009 spec support for space-around
.justify-content(@justify-method) when (@justify-method = space-around) {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: distribute;
    -o-box-pack: justify;
    box-pack: justify;
    justify-content: space-around;
}

// 2011 spec

// flex-start (default): items are packed toward the start line
// flex-end: items are packed toward to end line
// center: items are centered along the line
// space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
// space-around: items are evenly distributed in the line with equal space around them

.justify-content(@justify-method) {
    -webkit-justify-content: @justify-method;
    -moz-justify-content: @justify-method;
    -ms-justify-content: @justify-method;
    -o-justify-content: @justify-method;
    justify-content: @justify-method;
}

.align-items(@align-method) when (@align-method = flex-start ){
    -moz-box-align: start ;//https://developer.mozilla.org/en-US/docs/Web/CSS/box-align
    -webkit-box-align: start ;
    -ms-flex-align: start;//http://realworldvalidator.com/css/module/Microsoft/-ms-flex-align
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items(@align-method) when (@align-method = flex-end ){
    -moz-box-align:  end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items(@align-method) when (@align-method = center ){
    -moz-box-align:  center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items(@align-method) when (@align-method = baseline ){
    -moz-box-align:  baseline;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
} 
.align-items(@align-method) when (@align-method = stretch ){
    -moz-box-align:  stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.align-items(@align-method){
   -moz-box-align:  @align-method;
   -webkit-box-align: @align-method;
   -ms-flex-align: @align-method;
   -webkit-align-items: @align-method;
   align-items: @align-method;
}
.flex-wrap(@wrap-method) when(@wrap-method = nowrap){
   -ms-flex-wrap:none;
   -moz-flex-wrap:nowrap;
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
} 
.flex-wrap(@wrap-method) when(@wrap-method = wrap){
   -ms-flex-wrap:wrap;
   -moz-flex-wrap:wrap;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}
.flex-wrap(@wrap-method) when(@wrap-method = wrap-reverse){
   -ms-flex-wrap:wrap-reverse;
   -moz-flex-wrap:wrap-reverse;
   -webkit-flex-wrap: wrap-reverse;
   flex-wrap: wrap-reverse;
}
.flex-wrap(@wrap-method){
   -ms-flex-wrap:@wrap-method;
   -moz-flex-wrap:@wrap-method;
   -webkit-flex-wrap:@wrap-method;
   flex-wrap:@wrap-method;
}
.align-self(@value) when(@value = flex-start){
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align-self(@value) when(@value = flex-end){
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align-self(@value) when(@value = center){
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}
.align-self(@value) when(@value = baseline){
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline;
}
.align-self(@value) when(@value = stretch){
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.align-self(@value){
    -webkit-align-self:@value;
    -ms-flex-item-align:@value;
    lign-self:@value
}

///用户是否可选内容
.user-cant-select(){
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

///固定宽高
.fixed-width(@value){
    width:@value;
    min-width:@value;
    max-width:@value;
}
.fixed-height(@value){
    height:@value;
    min-height:@value;
    max-height:@value;
}

//充满整个
.brimming(){
      width: 100%;
      height: 100%;
}

//用户选择文字的底色和字体颜色
.selection(@color:#fff,@bg:#39f){
	::-moz-selection {
		color: @color;
		background: @bg;
	}
	::selection {
		color: @color;
		background: @bg;
	}
}



//微软IE10+栅格布局
//*----------------------------------------------------------------*\
//* 1、使用LESS定义一个mixin,名叫.msgrid，定义方法类似定义一个类
// * 2、 @column定义列
// * 3、 @row定义行
// * 4、 @colspan跨越的列
// * 5、 @rowspan跨越的行
// \*----------------------------------------------------------------*/	
.msgrid(){
	display: -ms-grid;
}
.msgrid-site(@column,@row,@colspan,@rowspan) {
  -ms-grid-column: @column*2;
  -ms-grid-row: @row*2-1;
  -ms-grid-column-span: @colspan*2-1;
  -ms-grid-row-span: @rowspan*2-1;
}

//修改原有控件样式
.appearance (@name:none,@type){
	appearance:@name;
	-moz-appearance:@name;
	-webkit-appearance:@name;
}
.appearance (@name:none,@type) when (@type = select){
	appearance:@name;
	-moz-appearance:@name;
	-webkit-appearance:@name;

	&::-ms-expand{
      display:@name;
    }
}
